<template>
  <div class="videoBox">
    <video
        id="videoElement"
        controls
        autoplay
        muted
        style="width: 100%; height: 100%; object-fit: fill"
    ></video>
  </div>
</template>
<script setup>
import flv from 'flv.js';
import {test} from '../service/api'
import {computed, onMounted, ref} from "vue";

const props = defineProps({
  taskInfo: {
    type: Object,
    default: () => {
    },
  },
});
// 首先定义flvPlayer为null
const flvPlayer = ref(null);
const taskInfo = computed(() => props.taskInfo);
const createVideo = () => {
  if (flv.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    flvPlayer.value = flv.createPlayer(
        {
          type: 'flv',
          url: 'http://1.15.155.4:2023/live?app=demo&stream=stream-1',
          isLive: true,
          hasAudio: false,
        }
    )
    ;
    flvPlayer.value.attachMediaElement(videoElement);
    flvPlayer.value.load();

    setTimeout(function () {
      flvPlayer.value.play();
    }, 300);
    //处理视频播放错误的语法
    flvPlayer.value.on('error', () => {
      return false;
    });
  }
};

// 我的视频是弹窗显示的，所以创建了destroy方法，在子组件中暴露出去后，在父组件调用即可，这样关闭弹窗后，视频流会停止请求。
const destroy = () => {
  flvPlayer.value.pause(); //暂停播放数据流
  flvPlayer.value.unload(); //取消数据流加载
  flvPlayer.value.detachMediaElement(); //将播放实例从节点中取出
  flvPlayer.value.destroy(); //销毁播放实例
  flvPlayer.value = null;
};
defineExpose({destroy});

onMounted(() => {
  createVideo();
});
</script>
<style scoped>
.videoBox {
  width: 800px;
  height: 450px;
  border: solid 1px #ccc;
}
</style>